<template>
    <div v-if="data.show" class="ready-go" @click="handleReady">
        <div v-if="!data.showGo" class="top">Ready</div>
        <div v-if="!data.showGo" class="timer">{{ data.countdown }}</div>
        <div v-if="data.showGo" class="go">Go!</div>
    </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue';
const data = reactive({
    countdown: 5, // 倒计时5秒
    show: false,
    timer: 0,
    showGo: false,
});

const handleReady = (cb: Function) => {
    data.show = true;
    data.timer = setInterval(() => {
        if (data.showGo) {
            clearInterval(data.timer);
            handleReset();
            if (cb) cb();
        } else {
            if (data.countdown === 0) {
                data.showGo = true;
            }
            data.countdown -= 1;
        }
    }, 1000);
};

const handleReset = () => {
    data.countdown = 5;
    data.show = false;
    data.timer = 0;
    data.showGo = false;
};

defineExpose({
    handleReady,
});
</script>

<style lang="scss" scoped>
.ready-go {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(black, 0.8);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    // gap: 20px;
    .top {
        font-size: 100px;
        font-weight: bold;
        font-style: italic;
        animation: scale-in-center 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94)
            both;
    }
    .timer {
        font-size: 120px;
        font-weight: bold;
        font-style: italic;
        animation: pulsate-fwd 1s ease-in-out infinite both;
    }
    .go {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        // transform: translate(-50%, -50%);
        font-size: 100px;
        font-weight: bold;
        font-style: italic;
        animation: scale-in-center 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94)
            both;
    }
}

@keyframes scale-in-center {
    0% {
        transform: scale(0);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes pulsate-fwd {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(2);
    }
    100% {
        transform: scale(1);
    }
}
</style>
